<template>
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" class="detial_goods">
		<swiper-item v-for="item,index in bigListImgData" :key='index' @click="showDetailsImg(index)">
			<image :src="item.pics_mid" style="width: 100%;height: 100%;"></image>
		</swiper-item>
	</swiper>
	<view class="detial_goods_titel">
		<view class="detial_goods_titel_topper">
			￥{{goodDetialData.goods_price}}
		</view>
		<view class="detial_goods_titel_context">
			<view class="detial_goods_titel_context_main">
				{{goodDetialData.goods_name}}
			</view>
			<view class="Collect">
				<uni-icons type="star"></uni-icons>
				<view class="Collect_context">
					收藏
				</view>
			</view>
		</view>
		<view class="detial_goods_titel_cont">
			快递: 免运费
		</view>
	</view>
	<rich-text :nodes="domImgData"></rich-text>
	<bottomBar :goodDetialData='goodDetialData'></bottomBar>
</template>

<script>
	import store from '../../store/store.js'
	import easyReq from '../../Tools/EasyReq.js'
	import {defineComponent,reactive,markRaw,toRefs,watch,computed} from 'vue'
	import {onReachBottom,onShow,onLoad,onPullDownRefresh} from '@dcloudio/uni-app';
	export default defineComponent({
		props:['id'],
	
		setup(){
			const datas = reactive({
				id:0,
				goodDetialData:{},
				width:uni.getSystemInfoSync().windowWidth,
				domImgData:''
			})
			const bigListImgData = computed(()=>{
				return datas.goodDetialData.pics || []
			})
			const domImgData = computed(()=>{
				return datas.goodDetialData.goods_introduce ? datas.goodDetialData.goods_introduce.replace(/<img/g,'<img style="display:block;"'):''||''
			})
			async function getDetialData(){
				const result = await easyReq(`/api/public/v1/goods/detail?goods_id=${datas.id}`)
				datas.goodDetialData = result
			}

			function showDetailsImg(index){
				uni.previewImage({
					current:index,
					urls:bigListImgData.value.map(value=>value.pics_big)
				})
			}
			onLoad(({id})=>{
				if(id){
					datas.id = id
					getDetialData()
				}
			})
			
			return {
				...toRefs(datas),bigListImgData,showDetailsImg,domImgData
			}
		}
	})
</script>

<style lang="scss">
$color:#a1a1a1;
.photos{
	height: 800rpx;
	background-color: blue;
}
.btm_bar{
	display: flex;
	height: 100rpx;
	background-color: white;
	position: fixed;
	display: flex;
	align-items: center;
	bottom: 0;
	left: 0;
	.icon_father{
		width: 16%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		color: #808080;
		position: relative;
		.icon_father_number{
			display: block;
			padding: 0 10rpx;
			font-size: 26rpx;
			color: white;
			border-radius: 50rpx;
			background-color: #DD524D;
			position: absolute;
			top: -5rpx;
			right: 10rpx;
		}
	}
	.bar_payof{
		width: 65%;
		background-color: #DD524D;
		height: 80%;
		border-radius: 40rpx;
		margin-left: 10rpx;
		display: flex;
		overflow: hidden;
		[class^="bar_payof"]{
			color: white;
			flex: 1;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.bar_payof_right{
			background-color: #F0AD4E
		}
	}
	
}
	
.detial_goods{
	height: 700rpx;
	swiper-item{
		height: 100%;
	}
}
.detial_goods_titel{
	padding: 0px 20rpx;
	.detial_goods_titel_topper{
		color: #DD524D;
		font-size:36rpx;
		margin: 60rpx 0 20rpx;
	}
	.detial_goods_titel_context{
		display: flex;
		align-items: center;
		.detial_goods_titel_context_main{
			width: 80%;
			font-size: 25rpx;
			border-right: 2rpx solid #C0C0C0;
		}
		.Collect{
			width: 20%;
			color: $color;
			font-size: 25rpx;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			display: flex;
			
		}
	}
	.detial_goods_titel_cont{
		margin-top: 30rpx;
		font-size: 22rpx;
		margin-bottom: 50rpx;
		color: $color;
	}
}
</style>
